<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .box {
            display: flex;
            line-height: 50px;
            text-align: center;
        }
        .text {
            width: 80px;
        }
        table {
            width: 1200px;
            height: 200px;
            border: 1px solid pink;
            margin-top: 50px;
            border-spacing: 0;
        }
        td,
        th {
            border-bottom: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="text">书名:</div>
            <input type="text" class="bookname">
        </div>
        <div class="box">
            <div class="text">作者:</div>
            <input type="text" class="author">
        </div>
        <div class="box">
            <div class="text">出版社:</div>
            <input type="text" class="publisher">
        </div>
        <button class="add">添加</button>
        <button class="search">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>书名:</th>
                <th>作者:</th>
                <th>出版社:</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const getURL = 'http://www.liulongbin.top:3006/api/getbooks';
        const addURl = 'http://www.liulongbin.top:3006/api/addbook';
        const delURL = 'http://www.liulongbin.top:3006/api/delbook';
        const booknameInp = document.querySelector('.bookname');
        const authorInp = document.querySelector('.author');
        const publisherInp = document.querySelector('.publisher');
        const addBtn = document.querySelector('.add');
        const searchBtn = document.querySelector('.search');
        const tbody = document.querySelector('tbody');
        addBtn.addEventListener('click', async () => {
            const res = await axios({
                method: 'post',
                url: addURl,
                data: {
                    bookname: booknameInp.value,
                    author: authorInp.value,
                    publisher: publisherInp.value,
                },
                params: {
                    msg: '成功或失败',
                }
            })
            if (res.data.status === 502) {
                alert(res.data.msg);
            } else {
                search();
            }

        })
        async function search(params) {
            tbody.innerHTML = '';
            const res = await axios({
                method: 'get',
                url: getURL,
                params,
            })
            const sort = res.data.data.sort((a, b) => b.id - a.id);
            // console.log(res.data.data);
            for (const item of sort) {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.bookname}</td>
                    <td>${item.author}</td>
                    <td>${item.publisher}</td>
                    <td>
                        <button onclick="del(${item.id})" class="del-btn">删除</button>
                    </td>
                `;
                tbody.appendChild(tr);
            }
        }
        async function del(id) {
            const res = await axios({
                method: 'get',
                url: delURL,
                params: {
                    id,
                }
            })
            alert(res.data.msg);
            if (res.data.status === 200) {
                search();
            }
        }
        search();
        searchBtn.addEventListener('click', function () {
            search({
                bookname: booknameInp.value.trim(),
                author: authorInp.value.trim(),
                publisher: publisherInp.value.trim(),
            })
        })
    </script>
</body>
</html>